//colors
$color_0: #919191;
$color_1: #d0d0d0;
$color_2: #9faeb9;
$color_3: rgba(200, 200, 200, 0.75);
$color_4: white;
$color_5: #f2f2f2;
$color_6: #cecece;
$color_7: #e3e3e3;
$color_8: #2aa14c;
$color_9: #9f9f9f;
$color_10: #0e9e38;
$color_11: #8e8e8e;
$color_12: #fff;
$color_13: #1e833c;
$color_14: #d91d14;
$color_15: #dee0de;
$color_16: #f8fcf9;
$color_17: #209d44;
$color_18: #999a99;
$color_19: #9998a6;
$color_20: #ccc2c2;
$color_21: #e0e0e0;
$color_22: #999999;
$color_23: #9acea7;
$color_24: #fad64e;
$color_25: #ea453f;
$color_26: #1a8a3c;
$color_27: #f8f8f8;
$color_28: #6cc085;
$color_29: #ebebeb;
$color_30: #adadad;
$color_31: green;
$color_32: #d61d13;
$color_33: #9a9a9a;
$color_34: #f3bab8;
$color_35: #e1e2e1;
$color_36: #909090;
$color_37: #e2e3e2;

//fonts
$font_0: Droid;

//@extend-elements
//original selectors
//input, select
%extend_1 {
	background: none;
	border: none;
	outline: none;
}

//original selectors
//.cause-paragraph ,  .hangout-paragraph ,  .final-results-paragraph
%extend_2 {
	text-align: right;
	color: $color_12;
	font-size: 16px;
}
.hangout-block
{
	border:1px solid #e1e2e1;
	border-bottom:3px solid #e1e2e1;
	border-radius:5px;
	min-height:10px;
}

.hangout-block-separator
{
	border-top:1px solid #e1e2e1;
	margin-left:0px;

}
.hangout-block-title
{
	background-color:#fff;
	text-align:center;
	width:35%;
	margin:0 auto;
	position:relative;
	bottom:10px;
}
.hangout-main-block
{
	margin-bottom:20px;
}
//original selectors
//.hangout-img img , .final-results-img img
%extend_3 {
	vertical-align: top;
	width: 50px;
	height: 50px;
	margin: 10px;
	border: 2px solid $color_12;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
}

//original selectors
//.final-results-title, .final-results-sub-title
%extend_4 {
	display: block;
	color: $color_12;
	font-size: 14px;
	font-family: $font_0;
	font-weight: bold;
}
.highlight-font{
	font-size: 25px;
}

//original selectors
//.tweets , .tweeters
%extend_5 {
	min-height: 300px;
	border: 1px solid #DEE0DE;
	margin: 50px 0;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
	width: 260px;
	float: right;
}

//original selectors
//.create-cause-text, .create-cause-options
%extend_6 {
	color: $color_12;
	padding-top: 40px;
	display: inline-block;
}
input {
	@extend %extend_1;
}
select {
	@extend %extend_1;
}

.cause {

	span {
		display: block;
	}
	
}

.final {
	display: inline-block;
	max-width: 665px;
}
.depend {
	display: inline-block;
	padding-right: 5%;
	position: relative;
}
.cause-paragraph {
	@extend %extend_2;
}
.hangout-paragraph {
	@extend %extend_2;
	font-size: 14px;
	display: inline-block;
}
.grey-font{
	color: #909090;
}
.grey-font a{
	color: #909090;
}
.final-results-paragraph {
	@extend %extend_2;
	font-size: 14px;
	display: inline-block;
}
.margin-top{
	margin-top: 11px;
}
.final-results-title {
	@extend %extend_4;
}
.final-results-sub-title {
	@extend %extend_4;
}


.tweets {
	@extend %extend_5;
	span {
		padding: 10px;
		&.tweet_paragraph {
			padding: 1px 10px;
			padding-bottom: 10px;
		}
	}
	div.tweets_block {
		border-bottom: 1px solid #DEE0DE;
		&:last-child {
			border: none;
		}
	}
}
.tweeters {
	@extend %extend_5;
	span {
		padding: 10px;
		&.tweeter-social-media-icon {
			padding: 3px 0;
		}
		&.tweeter_sub_paragraph {
			padding: 3px 0;
		}
		&.tweeter_profile_pic {
			padding: 0;
			margin-left: 8px;
		}
	}
	div.tweeters_block {
		border-bottom: 1px solid #DEE0DE;
		&:last-child {
			border: none;
		}
	}
}

.cause_block {

	a {
		text-decoration: none;
		color: #1A8A3C;
		:hover {
			text-decoration: none;
			color: #1A8A3C;
		}
	}
}

.light-green-font {
	color: #9ACEA7;
}
.yellow-font {
	color: #FAD64E;
}
.red-font {
	color: #EA453F;
}

.img-initiative-size{
	height: 50px;
	width: 50px;
}

.md-title {
	font-size: 30px;
}
.gray-text {
	color: $color_22;
}

.create-cause-options {
	@extend %extend_6;
}

.float-left {
	float: left;
}

.btn-size{
	width: 100px;
	background-color: green;
}

.right-side-menu-item {
	color: #9A9A9A;
	font-size: 18px;
	font-weight: bold;
	font-family: $font_0;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 5px;
	border-bottom: 1px solid #F3BAB8;
}
.right-side-menu {
	text-align: right;
}
.cause-wrapper {
	border: 2px solid #E1E2E1;
	border-bottom: 3px solid #E1E2E1;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
	margin-top: 15px;
}
.red-btn {
	background-image: URL("../images/navigation-bg.png");
	background-repeat: repeat-x;
	background-color: #D80000;
	color: $color_12;
	padding: 10px;
	margin: 20px;
	margin-left: 25px;
	font-family: $font_0;
	font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
}
.red-btn:hover{
	background-color: #0E9E38;
	color: $color_12;
}
.red-btn:active{
	background-color: #EE6A6A;
	color: $color_12;
}
.green-button{
	background-color:  #0E9E38;
	color: $color_12;
	padding: 10px;
	margin: 20px;
	margin-left: 25px;
	font-family: $font_0;
	font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
}
.green-button:hover{
	color: $color_12;
	background-color: #D80000;
}
.cause-wrapper-header {
	border-bottom: 1px solid #E1E2E1;
	margin: 0;
}
.cause-wrapper-row {
	margin: 0;
}
.cause-wrapper-title {
	font-family: $font_0;
	font-size: 18px;
	font-weight: bold;
	margin-top: 20px;
}
.cause-wrapper-sub-title {
	font-family: $font_0;
	font-size: 15px;
	color: $color_36;
}
.cause-wrapper-img {
	width: 135px;
	height: 110px;
	border: 4px solid #E1E2E1;
	padding: 2px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	small : 160*160
}
.cause-wrapper-img img{
	width: 100%;
	height: 100%; 
}
.cause-result-img {
	width: 135px;
	height: 105px;
	border: 4px solid #E1E2E1;
	padding: 2px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
	margin-bottom: 10px;
}
.cause-result-img img{
	height: 100%;
	width: 100%;
}
.timeline {
	border-right: 4px solid #E1E2E1;
	margin-right: 50px;
	margin-left: 15px;
	padding-top: 30px;
	min-height: 100px;
}
.timeline-item {
	padding-top: 20px;
	margin-bottom: 10px;
	width: 595px;
	&:last-child {
		margin-bottom: 0;
	}
}
.small-item {
	height: 170px;
	background-image: URL("note-bg-small.png");
}
.medium-item {
	height: 280px;
	background-image: URL("note-bg-md.png");
}
.large-item {
	height: 533px;
	background-image: URL("note-bg-lg.png");
}
.timeline-item-wrapper {
	padding: 5px 30px;
}
.bold {
	font-weight: bold;
}
.calendar-icon {
	background-image: URL("calendar-icon.png");
	background-repeat: no-repeat;
	min-height: 30px;
	min-width: 27px;
}
.date-wrapper {
	font-size: 12px;
	display: inline-block;
}
.date-time {
	margin-top: 30px;
}
.timeline-item-supporter {
	margin-top: 30px;
}
.timeline-item-supporter-img {
	margin-top: 30px;
	min-height: 70px;
	min-width: 65px;
	border: 1px solid #E2E3E2;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
	padding: 4px;
}
.timeline-item-supporter-img img{
	height: 100%;
	width: 100%;
	margin-top: 2px;
}
.padding{
	padding: 8px;
}
.timeline-item-supporter-img img{
	height: 100%;
	width: 100%;
}
.timeline-item-supporter-title {
	font-size: 15px;
}
.timeline-item-supporter-sub-title {
	font-size: 12px;
}
.cause-result-sub-title {
	font-size: 10px;
}
.bottom-bordered {
	border-bottom: 4px solid $color_35;
}
.circle-icon {
	width: 30px;
	height: 30px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 20px;
	border: 4px solid $color_35;
	float: right;
	margin-right: -17px;
	margin-top: 26px;
}
.green-icon {
	background-color: #0E9E38;
}
.red-icon {
	background-color: #EA453F;
}
.yellow-icon {
	background-color: #FAD64E;
}
.pre-timeline-date {
	display: inline-block;
	float: right;
	margin-right: -100px;
	padding-left: 20px;
	padding-top: 10px;
}
.cause_discussion_img {
	height: 60px;
	width: 70px;
	border: 2px solid $color_35;
	float: right;
}
.cause_discussion_img img{
	height: 100%;
	width: 100%;
}
.send-comment {
	margin-bottom: 100px;
}
.cause_discussion_block {
	padding: 10px 0;
	border-bottom: 2px solid $color_35;
	&:last-child {
		border-bottom: 0;
	}
}
.progress {
	margin: 10px 0;
}
.small-text {
	font-size: 16px;
}
.cause-result-wrapper {
	border: 1px solid $color_35;
	border-bottom: 3px solid $color_35;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 5px;
	min-height: 100px;
	margin-bottom: 20px;
	margin-left: 0;
}
.cause-result-item {
	min-height: 100px;
	&:last-child {
		border-right: 0;
		padding-top: 15px;
	}
}
.border-right{
	border-left: 1px solid $color_35;
	padding-bottom: 5px;
}
.border-bottom{
	border-bottom: 1px solid $color_35;
}
.hangout-img img {
	@extend %extend_3;
}
.final-results-img img {
	@extend %extend_3;
}
.pagination>.active>a {
	z-index: 2;
	color: $color_12;
	background-color: #1A8A3C;
	border-color: #1A8A3C;
}
.topic-list li {
	display: inline;
	list-style-type: none;
	padding-right: 25px;
	width: 80px;
}
.select-sections ul {
	padding: 0;
	text-align: right;
	float: right;
}
a.cause-section {
	text-decoration: none;
}
.cause_details .title-font {
	font-size: 16px;
}
.sim_causes .section-sub-text {
	color: $color_32;
}
.cause-wrapper-paragraph .col-md-12 {
	padding: 20px;
	padding-top: 30px;
}
.sep{
	border-left: 1px solid black;
	
}
.result-form{
	margin-top: 15px;
	margin-bottom: 15px;
}
.result-font{
	font-weight: bold;
	font-size: 16px;
}
.result-text{
	height: 130px;
	text-align: right;
	border-radius: 5px;
}
.profile_image{
	display: inline-block;
	height: 200px;
	width: 200px;
	border: 2px solid #9FAEB9;
	border-radius: 5px;
}

.profile_image img{
	width: 100%;
	height: 100%;
}

.table-border{
	border: 1px solid black;
	text-align: right;
}
.current_user_info{
	padding-bottom: 15px;
}
.margin-bottom{
	margin-top: 10px;
}
.float-left{
	float: left;
}
.pagination{
direction: rtl;
}
.digg_pagination {
  background: white;
  cursor: default;
  float: left;

  /* self-clearing method: */ }
  .digg_pagination a, .digg_pagination span, .digg_pagination em {
    padding: 0.3em 1em;
    display: block;
    float: right;
    margin-right: 0px; }
  .digg_pagination .disabled {
    color: #999999;
    border: 1px solid #dddddd;
 
}
  .digg_pagination .current {
    font-style: normal;
    font-weight: bold;
    background: #1A8A3C;;
    color: white;
    border: 1px solid #dddddd; }
  .digg_pagination a {
    text-decoration: none;
    color: #1A8A3C;;
    border: 1px solid #dddddd; }
    .digg_pagination a:hover, .digg_pagination a:focus {
      color: #1A8A3C;
      border-color: #dddddd;
      background-color: #EDEDED;; }
  .digg_pagination .page_info {
    background: #2e6ab1;
    color: white;
    padding: 0.4em 0.6em;
    width: 22em;
    margin-bottom: 0.3em;
    text-align: center; }
    .digg_pagination .page_info b {
      color: #000033;
      background: #6aa6ed;
      padding: 0.1em 0.25em; }
  .digg_pagination:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; }
  * html .digg_pagination {
    height: 1%; }
  *:first-child + html .digg_pagination {
    overflow: hidden; }

.image-frame{
	height: 210px;
	width:250px;
	border: 2px solid #E6E3E3;
	border-radius: 5px;
}
.image-frame img{
	height: 100%;
	width: 100%;
}

.user-row {
    margin-bottom: 14px;
}

.user-row:last-child {
    margin-bottom: 0;
}

.dropdown-user {
    margin: 13px 0;
    padding: 5px;
    height: 100%;
}

.dropdown-user:hover {
    cursor: pointer;
}

.table-user-information > tbody > tr {
    border-top: 1px solid rgb(221, 221, 221);
}

.table-user-information > tbody > tr:first-child {
    border-top: 0;
}


.table-user-information > tbody > tr > td {
    border-top: 0;
}
.image_frame_user{
	height: 100px;
	width: 100px;
}
image_frame_user img{
	height: 100%;
	width: 100%;
}
.image_frame_small_user{
	height: 50px;
	width: 50px;
}
image_frame_small_user img{
	height: 100%;
	width: 100%;
}
